<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
    <title>用户登陆</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/color.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/demo.css" />
    <script src="${ctx}/statics/easyui/jquery.min.js" type="text/javascript"></script>
    <script src="${ctx}/statics/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="${ctx}/statics/easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body class="easyui-layout" >
    <%--获取登陆错误信息--%>
    <c:set var="errorInfo" value="${sessionScope.loginError}" />
    <c:remove var="loginError" scope="session" />
    <%--页面显示部分--%>
    <div data-options="region:'north',split:false,border:false"
         style="height:15%;background-color:#91C5EE;border-bottom:1px solid #1f1f1f">
        <h1 style="color: white;text-indent:20px;font-size:25px;font-weight:bold">AgentSystem&nbsp;|&nbsp;代理商管理系统&nbsp;v2.0</h1>
    </div>
    <div data-options="region:'south',split:false,border:false" style="height:20%;background-color:#B6D8F3;text-align:center;margin:0">
        <p>北京XXX科技有限公司</p>
        <p>Tel:400-0000-0001</p>
    </div>
    <div data-options="region:'west',split:false,border:false" style="width:20%;background-color:#B6D8F3"></div>
    <div data-options="region:'east',split:false,border:false" style="width:20%;background-color:#B6D8F3"></div>
    <div data-options="region:'center',border:false" style="background:white;text-align:center">
        <h1 style="margin-top:40px;font-size:20px;font-weight:bold">登陆系统&nbsp;|&nbsp;Sign in</h1>
        <%--登陆错误消息提示--%>
        <div style="height:20px;margin-top:55px" >
            <span style="margin-bottom:5px;color:red;font-size:14px;">${requestScope.loginError}</span>
        </div>
        <div style="display:inline-block;margin-top:5px;">
            <form:form method="post" modelAttribute="asUser" action="${ctx}/do/dologin"  >
                <table cellpadding="5px">
                    <tr>
                        <td style="font-size:14px">登陆账号:</td>
                        <td style="font-size:14px">
                            <form:input type="text" path="userName" autocomplete="off"  />
                            <form:errors path="userName" cssStyle="color:red;width:200px" />
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size:14px">登陆密码:</td>
                        <td style="font-size:14px">
                            <form:input type="password" path="userPassword" />
                            <form:errors path="userPassword" cssStyle="color:red;width:200px" />
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size:14px">验证码:</td>
                        <td style="font-size:14px">
                            <input type="text" name="verifyCode" id="verifyCode" />
                            <span style="color:red;width:200px" >${requestScope.codeError}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="javascript:void(0)" onclick="changeCode()" class="easyui-linkbutton" style="width:70px;height:28px;background-color:#128DEE" >换一个</a>
                        </td>
                        <td>
                            <img src="${ctx}/Kaptcha.jpg" id="Kaptcha" width="120px" height="28px" style="margin-left:20px" align="验证码加载失败" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align:center" >
                            <input type="submit" value="登陆&nbsp;|&nbsp;Login"
                                   style="background-color:#128DEE;border:none;border-radius:5px;font-size:14px;cursor:pointer;width:100px;height:25px;color:white" />
                        </td>
                    </tr>
                </table>
            </form:form>
        </div>
    </div>

    <script>

        //页面加载发送请求将验证码存入redis中
        $(
            function()
            {
                saveCode();
            }
        );

        //请求controller方法将验证码存入redis服务器
        function saveCode()
        {
            $.ajax(
                {
                    type:"POST",
                    url:"${ctx}/do/saveCodeToRedis"
                }
            )
        }

        //点击换一个更换验证码
        function changeCode()
        {
            $("#Kaptcha").attr( "src" , "${ctx}/Kaptcha.jpg?r=" + Math.random() );
            //更换后重新保存验证码
            saveCode();
        }
    </script>

</body>
</html>
